<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
const msg = ref("hello");
const Click = () => {
  msg.value = "hi";
};
// 生命周期

// vue2
// export default {
// //创建周期
//   beforeCreate() {},
//   created() {},
// //挂载前后
//   beforeMount() {},
//   onMounted() {},
// //更新前后
//   onBeforeUpdate() {},
//   onUpdated() {},
// //卸载前后
//   onUnmounted() {},
//   onMounted() {},
// };

// vue3
// 1.创建周期：vue3中使用setup代替了beforeCreate和created
// 2.挂载前后
onBeforeMount(() => {
  console.log("1.挂载前：onBeforeMount");
});
// 使用场景：发送异步请求，操作DOM
onMounted(() => {
  {
    console.log("2.挂载后：onMounted");
  }
});
// 3.更新前后
onBeforeUpdate(() => {
  console.log("3.更新前：onBeforeUpdate");
});
onUpdated(() => {
  {
    console.log("4.更新后：onUpdated");
  }
});
// 4.卸载前后
// 使用场景：清楚定时器，清除全局变量，降低内存泄露的风险
onBeforeUnmount(() => {
  console.log("5.卸载前：onBeforeUnmount");
});
onUnmounted(() => {
  {
    console.log("6.卸载后：onUnmounted");
  }
});
</script>
<!-- created和mounted的区别
created在组件实例创建后调用，而mounted在组件挂载到DOM后调用。
created阶段无法访问组件的DOM元素，而mounted阶段可以访问组件的DOM元素。
created常用于初始化数据和执行异步操作，mounted常用于执行与DOM相关的操作。
-->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="Click">更改</button>
  </div>
</template>

<style scoped></style>
